<!--
 * @Author: wjk
 * @Date: 2019-12-31 15:40:51
 * @LastEditors: wjk
 * @LastEditTime: 2019-12-31 15:51:20
 * @description: file content
 -->
<template>
  <base-page-view ref="pageView" class-name="page-container feedback-container">
    <view class="container-block">
      <view class="f-title">反馈类型（必选）</view>
      <view class="f-type-list">
        <text
          v-for="(item, index) in feedbackType"
          :key="index"
          class="f-type-item"
          :class="{'active': formData.adviceStatus === item.aId}"
          @click="handleSelected(item)"
        >{{ item.advice }}</text>
      </view>
    </view>
    <view class="container-block">
      <view class="f-title">反馈内容（必填）</view>
      <view class="f-content">
        <textarea v-model="formData.content" :maxlength="300" placeholder="请输入反馈内容，我们会为您更好的服务" placeholder-style="font-size: 26rpx;color:#ccc" @input="inputText"></textarea>
        <text class="f-con-num">{{ txtLen }}/300</text>
      </view>
      <view class="f-con-img">
        <view v-for="(item, index) in picList" :key="item.url" class="relative-container f-img-item">
          <image class="con-img-item" :src="item.url" @click="showPreviewImg(picList, index, 1)" />
          <image class="icon-del" src="/static/images/icon/icon_del.png" @click.stop="delPic(index)" />
        </view>
        <view v-if="picList.length < 4" class="f-img-item" @click="uploadImage">
          <image class="con-img-item" src="/static/images/icon/pic_upload.png" />
        </view>
      </view>
    </view>
    <view class="f-sub-btn" :style="{'background':(txtLen===0?'#ddd':'#000')}" @click="submit">提交</view>
    <view class="f-record-title">我的反馈记录</view>
    <view class="f-record-list ">
      <view v-for="(advice,index) in welfareAdviceList" :key="index" class="f-record-item container-block">
        <view class="f-type-record">
          <text>反馈类型：{{ backType[advice.adviceStatus + ''] }}</text>
          <text>{{ _parseTime(advice.createdAt,' {y}-{m}-{d}') }}</text>
        </view>
        <view class="f-con-record" :style="{'border-bottom':(advice.welfareAdviceReply?'1px solid #E6E6E6':'none')}">
          <view class="f-con-record-top">
            <view class="title">反馈内容：</view><view>{{ advice.content }}</view>
          </view>
          <view v-if="advice.newPic.length>0" class="f-con-record-pic">
            <img v-for="(recodeimg,index2) in advice.newPic" :key="index2" class="recodeImg" :src="recodeimg" @click="showPreviewImg(advice.newPic, index2, 2)" />
          </view>
        </view>
        <view v-if="advice.welfareAdviceReply" class="f-back-record">
          <view>小碧回复：</view>
          <view>{{ advice.welfareAdviceReply.content }}</view>
        </view>
      </view>
      <view v-if="nomore && !loading &&welfareAdviceList.length > 0" class="no-tip">没有更多了</view>
      <view v-if="nomore && !loading &&welfareAdviceList.length <= 0" class="no-tip">暂无数据</view>
    </view>
    <confirmPopup ref="confirm" />
  </base-page-view>
</template>

<script>
import { mapGetters } from 'vuex'
import confirmPopup from '@/components/confirmPopup/index'
import { parseTime } from '@/utils/tools'
import './index.scss'
export default {
  components: {
    confirmPopup
  },
  data() {
    return {
      feedbackType: [],
      picList: [],
      formData: {
        mobile: '',
        content: '',
        userId: '',
        pic: '',
        username: '',
        adviceStatus: null
      },
      listQuery: {
        pageIndex: 1,
        pageSize: 5,
        userId: ''
      },
      loading: false,
      nomore: false,
      welfareAdviceList: [],
      backType: {},
      txtLen: 0
    }
  },
  onLoad() {
    this.getFeedbackType()
    this.listQuery.userId = this.user.uid
    this.getFeedbackList()
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  methods: {
    init() {
      this.picList = []
      this.formData = {
        mobile: '',
        content: '',
        userId: '',
        pic: '',
        username: '',
        adviceStatus: null
      }
      this.listQuery.pageIndex = 1
      this.listQuery.userId = this.user.uid
      this.listQuery.pageSize = 5
      this.loading = false
      this.nomore = false
      this.txtLen = 0
      this.welfareAdviceList = []
      this.getFeedbackList()
    },
    // 反馈类型
    async getFeedbackType() {
      const res = await this.$api.mineApi.feedbackType()
      if (res.success) {
        this.feedbackType = res.data
        this.feedbackType.forEach((item) => {
          this.backType[item.aId] = item.advice
        })
      }
    },
    async uploadImage() {
      const count = 4 - this.picList.length
      if (count < 1) {
        this.showToast('图片最多可上传4张哦~')
        return
      }
      const data = await this.$api.commonApi.uploadImg({ count })
      if (data.success) {
        const newData = data.url.sort((a, b) => {
          return a.sort - b.sort
        })
        this.picList = this.picList.concat(newData)
      }
    },
    async submit() {
      if (this.formData.content.replace(/\s/g, '').length > 0 || this.picList.length > 0) {
        this.formData.mobile = this.user.mobile
        this.formData.userId = this.user.uid
        this.formData.username = this.user.nickname
        const picArr = []
        this.picList.forEach(item => {
          picArr.push(item.url)
        })
        this.formData.pic = picArr.join(',')
        const res = await this.$api.mineApi.addFeedback(this.formData)
        if (res.success) {
          this.$refs.confirm.show({
            title: '提交成功',
            content: '感谢您对碧选关注与支持，我们会认直处理您的反馈，尽快修复和完善相关功能',
            yesTxt: '我知道了',
            cancleTxt: '',
            maskClickClose: false,
            yesCb: () => {
              this.init()
            }
          })
        }
      } else {
        uni.showToast({
          title: '请输入反馈内容或上传问题截图',
          icon: 'none',
          duration: 2000,
          mask: true
        })
      }
    },
    async getFeedbackList() {
      if (this.loading) return
      this.loading = true
      const res = await this.$api.mineApi.feedbackList(this.listQuery)
      if (res.success) {
        const data = res.data.welfareAdviceList.map(item => {
          item.newPic = []
          if (item.pic) {
            item.newPic = item.pic.split(',')
          }
          return item
        })
        // pageIndex: 1,
        // pageSize: 5,
        if (this.listQuery.pageIndex === 1) {
          this.welfareAdviceList = []
        }
        if (this.listQuery.pageSize > data.length) {
          this.nomore = true
        }
        this.welfareAdviceList = this.welfareAdviceList.concat(data)
      } else {
        this.nomore = false
        this.welfareAdviceList = []
      }

      this.loading = false
    },
    _parseTime(time, par) {
      return parseTime(time, par)
    },
    inputText(e) {
      this.txtLen = e.detail.value.length
    },
    handleSelected(item) {
      this.formData.adviceStatus = item.aId
    },
    delPic(index) {
      this.picList.splice(index, 1)
    },
    showPreviewImg(img, index, type) {
      let imgList = []
      if (type === 1) {
        img.forEach(item => {
          imgList.push(item.url)
        })
      } else if (type === 2) {
        imgList = img
      }
      uni.previewImage({
        current: index,
        urls: imgList
      })
    }
  },
  onReachBottom() {
    if (this.loading || this.nomore) return
    this.listQuery.pageIndex++
    this.getFeedbackList()
  },
  onPageScroll(res) {
    this.$refs.pageView.scrollShowBtn(res)
  }
}
</script>
